CSS Grid 是一個二維排版佈局系統，我們可以同時運用橫向和垂直來組合排列。而 Flexbox 只能在橫向和垂直佈局中選擇一個來佈局，也就是所謂的一維排版佈局系統。

所以大部分教學都會建議： “ CSS Grid 用來做全頁的排版佈局，而 Flexbox 則用在較小的排版需求 “。

咋聽之下好像很對，但有些專家反而囑咐不要用這樣簡單的二分法。我們今天就來整理看看這些專家對 CSS Grid 和 Flexbox 的使用時機的見解。

專家的叮嚀

Coyier：大部分日常使用情境都是一維的排列。我不希望有人認為因為是一維而必須採用 FLexbox，而在二維時才用 Grid。

Monus：事實上我們常常使用 Flexbox 建立二維佈局（基於其 warp 換行列能力），也會使用 Grid 建立一維佈局（由於其 auto-placement 自動放置能力）。

Maldonado：Flexbox 讓我們可以創建更具回應性和可維護性的網頁，而 Grid 確實可以建立更加複雜的佈局設計。我們的目標應該是同時使用它們：請使用 Grid 來做佈局；而使用 Flexbox 來進行元素對齊。

聽完專家們的意見陳述，我們把各造建議的使用時機整理如下述：

CSS Grid 的使用情境

• **需要複雜的排版佈局設計：**二維排版佈局系統必然比一維系統更適合創建複雜的設計。Grid 在建立排版設計的同時還能保持良好的可維護性。
• **需要重複類似元素：**在網頁設計上時常有重複元素的需求：比如人物簡介、文章排列、圖庫呈現等等。使用 Grid 來操作重複元素非常簡單便可以完成。
• **精確的元素位置控制：**用 Grid 可以把每一個元素規劃在獨立的網格裡面。沿著水平軸和垂直軸來排列並控制各個元素位置。比如不對稱的排版佈局便需要用 Grid 來精準定位。

CSS Flexbox 的使用情境

• **需要把元素對齊：**Flexbox 非常適合這一點，建立 Flex 容器再設定合適的對齊參數便可以完成。
• **製作小型的排版佈局設計：**Flexbox 應用在小型的排版設計（包括幾行或幾列的佈局）是比較合理的。
• **需要適應內容本身：**Flexbox 的寬度或高度是由元素的內容所決定。Flexbox 會根據元素內容和可用空間而成長或縮小。W3C 的相關敘述是這樣的：Flexbox 是簡單且強大的工具嗎，她可以按照網頁經常需要的方式來分配空間和對齊內容。

結語

Flexbox 與 CSS Grid 的使用時機和情境確實沒有明確答案，多參考多做嘗試，始終思考是哪個方式更能體現我們的想法和目標。結合使用 Flexbox 和 CSS Grid 來解決複雜的排版佈局也是常態。